<template>
  <div class="body">
    <div class="search">
      <div class="center">
        <div class="btn-search">
          <h3>酒店民宿</h3>
          <div>
            <input type="text" placeholder="请输入地名关键词" />
            <button>搜索</button>
          </div>
        </div>
        <div class="main">
          <div class="hotel-type">
            <span>酒店类型：</span>
            <a @click="getHotels()">不限</a>
            <a @click="hotelClassId=1">酒店住宿</a>
            <a @click="hotelClassId=2">渔农家乐</a>
            <a @click="hotelClassId=3">东海人家</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 酒店详情 -->
    <div class="hotel-list">
      <div class="center">
        <select name="" id="" class="number">
          <option value="5">每页显示5条数据</option>
          <option value="10">每页显示10条数据</option>
          <option value="15">每页显示15条数据</option>
          <option value="25">每页显示20条数据</option>
        </select>
        <ul v-if='!hotelClassId'>
          <hotel-cell v-for="item in hotels" :key="item.hid" :item="item"/>
        </ul>
        <ul v-if="hotelClassId">
          <hotel-cell v-for="item in hotelsByclass" :key="item.hid" :item="item"/>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import HotelCell from '@/components/HotelCell.vue';
export default {
  components: { HotelCell },
  data() {
    return {
      hotelsByclass: [],  // 接收按酒店分类查询酒店的数据
      hotelClassId: null,  //酒店分类  1-酒店住宿  2-渔农家乐  3-东海人家
      hotels:[],  // 接收所有酒店数据
    }
  },
  mounted () {
    this.getHotels()
  },
  watch: {
    hotelClassId() {
      this.getHotelsByclass()
    }
  },
  methods: {
    //查询所有酒店
    getHotels(){
      this.axios.get('/hotel/show').then(res=>{
        console.log('所有酒店:',res);
        this.hotels = res.data
      })
    },
    // 按酒店分类查询酒店
    getHotelsByclass() {
      this.axios.get(`/hotel/classShow?hotel_class_id=${this.hotelClassId} `).then(res=>{
        console.log('按酒店分类查询酒店:',res);
        this.hotelsByclass = res.data
      })
    }
  },
};

</script>
<style scoped src="../assets/css/hotel.css">

</style>
<style lang="scss" scoped></style>
